<template>
  <div class="my">
    <div id="nav">
      我的
    </div>
    <div id="header">
      <div id="tou_tou"></div>
      <div id="zi">
        <p>神树排名</p>

        <span>1830000000</span>
      </div>
      <div id="you">
        <router-link to="/personage">
          <van-icon name="arrow" />
        </router-link>
      </div>
    </div>
    <div id="main">
      <p id="wo">我的服务</p>
    </div>
    <div id="list">
      <div id="A">
        <dl>
          <router-link to="/comparison">
            <dt>
              <van-icon id="AA" name="bag" />
            </dt>
            <dd>我的对比</dd>
          </router-link>
        </dl>
      </div>
      <div id="B">
        <dl>
          <router-link to="/contact">
            <dt>
              <van-icon id="BB" name="phone" />
            </dt>
            <dd>联系我们</dd>
          </router-link>
        </dl>
      </div>
      <div id="C">
        <dl>
          <router-link to="/opinion">
            <dt>
              <van-icon id="CC" name="records" />
            </dt>
            <dd>意见反馈</dd>
          </router-link>
        </dl>
      </div>
      <div id="D">
        <dl>
          <router-link to="/share">
            <dt>
              <van-icon id="DD" name="share" />
            </dt>
            <dd>分享好友</dd>
          </router-link>
        </dl>
      </div>
    </div>
  </div>
</template>

<script></script>

<style>
#nav {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
#header {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
}
#tou_tou {
  width: 80px;
  height: 80px;
  background-color: #ccc;
  border-radius: 50%;
  margin-top: 20px;
  margin-left: 20px;
}
#zi {
  margin-left: 110px;
  margin-top: -70px;
}
#you {
  font-size: 36px;
  margin-left: 320px;
  margin-top: -27px;
}
#main {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
  line-height: 80px;
}
#list {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
  display: flex;
}
#A,
#B,
#C,
#D {
  width: 80px;
  height: 80px;
  flex: 1;
  text-align: center;
  margin-top: 20px;
}
#AA {
  font-size: 36px;
  color: orange;
}
#BB {
  font-size: 36px;
  color: skyblue;
}

#CC {
  font-size: 36px;
  color: blueviolet;
}
#DD {
  font-size: 36px;
  color: aquamarine;
}
#nei {
  width: 100%;
  height: 200px;
}
</style>
